<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
<script src="../../libs/jquery.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH"></script>
<script src="../../libs/jquery.baiduMap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/theMap.css"/>
<link rel="stylesheet" type="text/css" href=""/>

</head>

<body>
	<div class="theTop" style="margin: 10px 0 10px 0;">
		<div class="layui-input-block" style="width: 300px;float: left;">
	      <input style="display: inline-block !important;" type="text" name="title" required  lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">

		</div>
		<div style="float: left;margin-left: 20px;">
		<button class="layui-btn layui-btn-radius">字段搜索</button>
		<button class="layui-btn layui-btn-radius layui-btn-normal">选点搜索</button>
		<button class="layui-btn layui-btn-radius layui-btn-warm">框选搜搜</button>
		<button class="layui-btn layui-btn-radius layui-btn-danger">画圈搜索</button>
		</div>
	</div>
	<!--<div class="clearfix" style=""></div>-->
	<div class="clearfix"></div>
<div class="box" style="margin: 10px 0 0 0;">
	<ul class="list fl">
		<li> <a href="javascript:void(0)">中冶武汉勘察研究院</a> </li>
		
	</ul>
	<div id="container3" class="container fl"></div>
</div>

<script type="text/javascript">
var points = [{
	id: 1,
	lng: 114.405436,
	lat: 30.637339,
	title: "中冶武汉勘察研究院",
	content: ["地址：湖北省武汉市青山区冶金大道17号", "电话：010-86364640"]
}];

var map = new BaiduMap({
	id: "container3",
	level: 16, //  选填--地图级别--(默认15)
	zoom: true, // 选填--是否启用鼠标滚轮缩放功能--(默认false)
	type: ["地图", "卫星", "三维"], // 选填--显示地图类型--(默认不显示)
	width: 320, // 选填--信息窗口width--(默认自动调整)
	height: 70, // 选填--信息窗口height--(默认自动调整)
	titleClass: "title",
	contentClass: "content",
	showPanorama: true, // 是否显示全景控件(默认false)
	showMarkPanorama: true, // 是否显示标注点全景图(默认false)
	showLabel: false, // 是否显示文本标注(默认false)
	mapStyle: "normal", // 默认normal,可选dark,light
	icon: { // 选填--自定义icon图标
		url: "img/marker.png",
		width: 34,
		height: 94
	},
	centerPoint: { // 中心点经纬度
		lng: 118.106586,
		lat: 24.467207
	},
	index: 3, // 开启对应的信息窗口，默认-1不开启
	animate: true, // 是否开启坠落动画，默认false
	points: points, // 标注点--id(唯一标识)
	callback: function(id) {
		$(".list").find("li").eq(id - 1).addClass("active").siblings().removeClass("active");
	}
});

var data = map.getPosition();
var $li = $(".list").find("li");

$li.each(function(i) {
	$(this).data("id", i + 1);
}).on("click", function() {
	map.openInfoWindow($(this).data("id"));
	$(this).addClass("active").siblings().removeClass("active");
}).eq(data.id - 1).addClass("active");
</script>
</body>
<style>
.clearfix:before,.clearfix:after {
  display: table;
  content: " "
}

.clearfix:after {
  clear: both
}
</style>
</html>